挑戰 React 第十五篇

javascript 與 jsx 事件處理差別

實作目標

按了按鈕，訊息改變

為何 React 的事件處理需要 Bind?

執行以下步驟，會說明為什麼需要 Bind。

1. 在 src資料夾下新增一個 EventBind.js 檔案
2. EventBind.js 的 Class Component 新增一個 button 按鈕

import React from 'react';
import './App.css';
import EventBind from './EventBind';

function App() {
  return (
    <div className="App">
      <EventBind />
    </div>
  );
}

export default App;

3. 先試著 yarn start 前兩步驟

確認出現一個 click 按鈕

4. 若要改變訊息，需新增 state

import React, { Component } from 'react'

class EventBind extends Component {
  constructor(props) {
    super(props)
  
    this.state = {
       message: '初始訊息'
    }
  }
  
  render() {
    return (
      <div>
        <div>{this.state.message}</div>
        <button>click</button>
      </div>
    )
  }
}

export default EventBind

5. 還是先 yarn start 第四步驟

確認有設定的初始訊息

6. 新增一個按鈕，setState改變訊息

handleClickMessage() {
    this.setState({
      message: '訊息已改變'
    })
  }

  render() {
    return (
      <div>
        <div>{this.state.message}</div>
        <button onClick={this.handleClickMessage}>click</button>
      </div>
    )
  }

按了按鈕，出現 error 訊息

7. 查看為什麼 undefined?

  handleClickMessage() {
    console.log(this);
    this.setState({
      message: '訊息已改變'
    })
  }

確認找不到綁定的this，因此 setState 才會 undefined

學習心得

今天這篇實作時我一直搞不懂，問了同事為才真正了解了什麼時候 javascript 要加小括弧，什麼時候不用。

• 若要立即呼叫才需要 + ()，
• 若只是要傳一個function 且沒有要立即呼叫則無需 + ()

除此之外，若 javascript this沒有確認好對象，就會出現範例中的 undefined 錯誤或者找錯對象，這篇實作對我來說受益良多。